<template>
  <h1>组合式API</h1>
  <h2>{{ number }}</h2>
  <button @click="addFn">点我</button>
</template>

<script>
/* 
  目标：初体验 Vue3 组合式 API 写法
*/
import { ref } from 'vue'
export default {
  name: 'App',
  setup() {
    // 🔔 组合式API优点：一个业务逻辑写到一个位置，封装和复用变得更方便
    const number = ref(0)
    const addFn = () => {
      number.value++
    }
    return { number, addFn }
  },
}
</script>